<!-- 车辆管理 -->
<template>
  <div class="dashboard-container driver customer-list-box">
    <div class="box">
      <!-- 搜索框 -->
      <el-card shadow="never" class="search-card-box">
        <el-form ref="params" :model="params" label-width="90px">
          <el-row :gutter="80">
            <el-col :span="8">
              <el-form-item label="司机账号:" style="margin-bottom: 0px">
                <el-input
                  v-model.trim="params.account"
                  placeholder="请输入司机账号"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="司机姓名:"
                style="margin-bottom: 0px"
                label-width="80px"
              >
                <el-input
                  v-model.trim="params.name"
                  placeholder="请输入司机姓名"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="司机手机号:"
                style="margin-bottom: 0px"
                label-width="90px"
              >
                <el-input
                  v-model.trim="params.phone"
                  placeholder="请输入司机手机号"
                  clearable
                />
              </el-form-item>
            </el-col>
            <!-- 下拉框树形结构 -->
            <el-col :span="8" style="margin-top: 15px">
              <el-form-item label="所属机构：">
                <el-select
                  ref="selectTree"
                  v-model="params.agentId"
                  placeholder="请选择所属机构"
                  style="width: 222px"
                >
                  <el-option
                    v-for="item in optiondata(option)"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    style="display: none"
                  >
                  </el-option>
                  <el-tree
                    :data="option"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                  >
                  </el-tree>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" style="margin-top: 15px">
              <el-button type="warning" @click="handleFilter">搜索</el-button>
              <el-button plain class="reset-btn" @click="reset()"
                >重置</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <!-- 表格部分 -->
    <el-card class="box-card">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="100">
          <template slot-scope="scope">
            {{ scope.$index + 1 + (params.page - 1) * params.pageSize }}
          </template>
        </el-table-column>
        <el-table-column prop="account" label="司机账号" width="200">
        </el-table-column>
        <el-table-column prop="name" label="司机姓名" width="200">
        </el-table-column>
        <el-table-column prop="mobile" label="司机电话" width="200">
        </el-table-column>
        <el-table-column prop="truck.licensePlate" label="关联车辆" width="200">
        </el-table-column>
        <el-table-column prop="agency.name" label="所属机构" width="200">
        </el-table-column>
        <el-table-column prop="workStatus" label="工作状态" width="200">
          <!-- 工作状态 -->
          <template slot-scope="scope">
            <!-- 状态小圆点 -->
            <span
              :class="{
                'status-dot': true,
                'status-dot-green': scope.row.workStatus === 1,
                'status-dot-red': scope.row.workStatus === 0
              }"
            ></span>
            <span>{{ handleWorkStatus(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="130" align="center">
          <template #default="{ row }">
            <el-button
              @click="$router.push(`driver-detail/${row.userId}`)"
              type="text"
              size="small"
              >查看</el-button
            >
            <el-button type="text" size="small" @click="open(row)"
              >配置车辆</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="box3">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(total)"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 配置车辆弹框 -->
    <el-dialog width="45%" title="配置车辆" :visible.sync="dialogVisible">
      <div class="box4">
        <div class="num">
          <div class="num1">
            <label>司机编号:</label>
            <span>{{ userId }}</span>
          </div>
          <div class="name">
            <label>司机名称:</label>
            <span>{{ name }}</span>
          </div>
        </div>
        <div>
          <div>
            <div class="num2">
              <label>司机电话: </label>
              <span>{{ mobile }}</span>
            </div>
            <div>
              <label>所属机构:</label>
              <span>{{ agencyName }}</span>
            </div>
          </div>
        </div>
      </div>
      <el-form>
        <el-form-item label="配置车辆:" style="margin-top: 20px">
          <el-select
            v-model="dataList"
            placeholder="配置车辆"
            style="width: 250px"
            @change="truckTypeDetailFrom(dataList)"
          >
            <el-option
              v-for="item in fromData"
              :label="item.licensePlate"
              :key="item.id"
              :value="item.licensePlate"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 弹框表格 -->
      <el-table :data="minFrom" style="width: 100%">
        <el-table-column label="车牌号" prop="licensePlate" width="250">
        </el-table-column>
        <el-table-column label="车辆状态" prop="workStatus" width="250">
        </el-table-column>
        <el-table-column label="操作" class="caozuo">
          <template #default>
            <el-button
              type="text"
              size="small"
              @click="$router.push(`vehicle-detail?id=${carId}`)"
              >查看</el-button
            >
            <el-button class="red" type="text" size="small" @click="del"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="box7">
        <el-button type="warning" @click="add">确定</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { agencyList } from '@/api/institutions'
import {
  driverList,
  getTruckListInDriver,
  truckTypeUpdate
} from '@/api/transit'

export default {
  data() {
    return {
      carId:'',
      // 车辆号码
      dataList: '',
      // 所属机构树形下拉框
      option: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 搜索条件 / 分页器
      params: {
        page: 1,
        pageSize: 10,
        account: '',
        name: '',
        phone: '',
        agentId: ''
      },
      // 总条数
      total: 0,
      // 列表数据
      tableData: [],
      // 控制弹框
      dialogVisible: false,
      id: null,
      // 树形结构列表
      agencyOptions: [],
      // 配置车辆下拉列表
      fromData: [],
      userId: '',
      // 弹框回显数据
      name: '',
      mobile: '',
      agencyName: '',
      cgepaihao: [],
      // 弹窗表格数据
      minFrom: []
    }
  },
  created() {
    // 获取列表数据渲染页面
    this.getList()
    this.getListDriver()
  },
  methods: {
    // 删除
    del() {
      console.log('删除')
      this.dataList = ''
      this.minFrom = []
    },
    // 点击确定修改配置车辆
    async add() {
      const res = await truckTypeUpdate(this.id)
      console.log('修改配置车辆', res)
      // 提示用户
      this.$message.error(res.msg)
      // 刷新页面
      this.getList()
    },
    // 处理循环数组
    optiondata(array, result = []) {
      array.forEach((item) => {
        result.push({ label: item.name, value: item.id })
        if (item.children && item.children.length !== 0) {
          this.optiondata(item.children, result)
        }
      })
      return JSON.parse(JSON.stringify(result))
    },

    // 下拉框
    handleNodeClick(node) {
      console.log(node)
      this.params.agentId = node.id
      this.$refs.selectTree.blur()
    },

    // 弹窗表格数据  value 是一个车牌号
    truckTypeDetailFrom(value) {
      // find 回显 res 是一个对象
      const res = this.fromData.find((item) => {
        return item.licensePlate === value
      })
      console.log('回显', res)
      res.workStatus = res.workStatus === 0 ? '停用' : '启用'
      this.minFrom = [
        {
          licensePlate: res.licensePlate,
          workStatus: res.workStatus
        }
      ]
    },
    // 配置车辆提示弹框
    open(row) {
      this.carId = row.truck.id
      // 提示弹框的结构
      const h = this.$createElement
      this.$msgbox({
        title: '车辆配置',
        message: h('p', null, [
          h('span', null, '配置车辆需满足以下条件： '),
          h('br'),
          h('span', null, '① 司机信息已完善'),
          h('span', { style: 'margin-left: 100px;' }, '② 司机已设置排班'),
          h('br'),
          h('span', null, '③ 司机绑定车辆未在启用状态')
        ]),
        // 确定 / 取消 按钮
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: async (action, instance, done) => {
          // console.log(action, instance, done)
          if (action === 'confirm') {
            // 点击确定要执行的操作
            this.dialogVisible = true
            console.log(row)
            this.cgepaihao = row.truck
            // 回显弹框数据
            this.userId = row.id
            this.name = row.name
            this.mobile = row.mobile
            this.agencyName = row.agency.name
            this.id = row.id
            // 回显输入框数据
            this.dataList = row.truck.licensePlate
            row.truck.workStatus = row.truck.workStatus === 0 ? '停用' : '启用'
            // 回显表格数据
            this.minFrom = [
              {
                licensePlate: row.truck.licensePlate,
                workStatus: row.truck.workStatus
              }
            ]

            done()
          } else {
            done()
          }
        }
      }).catch(() => {})
    },

    async getListDriver() {
      // 调用获取配置车辆下拉列表接口
      const res = await getTruckListInDriver()
      console.log('配置车辆下拉列表数据', res)
      this.fromData = res.data
    },
    // 查看详情
    handleTransportDetail(id) {
      // 跳转页面
      this.$router.push({
        path: '/transit/driver-detail',
        query: { userId: id, type: '司机详情' }
      })
    },
    // 重置按钮
    reset() {
      // 重置搜索条件
      this.params = {
        page: 1,
        pageSize: 10,
        account: '',
        name: '',
        phone: '',
        agentId: ''
      }
      // 刷新页面
      this.getList()
    },
    // 搜索
    handleFilter() {
      // 刷新页面
      this.getList()
      // 重置页码
      this.params.page = 1
    },

    // 分页器
    handleSizeChange(val) {
      // 每页显示多少条
      this.params.pageSize = val
      // 刷新页面
      this.getList()
    },
    handleCurrentChange(val) {
      // 当前页码
      this.params.page = val
      // 刷新页面
      this.getList()
    },

    // 工作状态 0休息 1上班
    handleWorkStatus(row) {
      if (row.workStatus === 0) {
        return '休息'
      } else if (row.workStatus === 1) {
        return '上班'
      }
    },
    // 获取列表数据
    async getList() {
      // 调用获取列表接口
      const res = await driverList(this.params)
      // console.log('列表数据', res)
      // 拿到列表数据
      this.tableData = res.data.items
      // 拿到总条数
      this.total = res.data.counts
      console.log('列表数据', this.tableData)

      // 调用获取机构列表接口
      const res1 = await agencyList()
      console.log('获取机构列表，树形结构', res1)
      this.option = JSON.parse(res1.data)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}
// 下拉框
::v-deep .el-select {
  width: 100%;
}
::v-deep .el-card {
  overflow: initial;
}

.box {
  width: 97%;
  height: 150px;
  background: #fff;
  margin: 0 auto;
  margin-top: 15px;
  border-radius: 4px;
  // padding: 5px 20px 20px 0;
}
.form {
  margin-top: 15px;
}

.box-card {
  width: 97%;
  margin: 0 auto;
  margin-top: 15px;
  padding: 10px;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 50px;
}
.box3 {
  // 上边距
  margin-top: 25px;
  // 水平居中
  text-align: center;
}
::v-deep .el-form-item__label {
  font-weight: 400;
}
.box4 {
  width: 100%;
  height: 100px;
  background: #faf9f9;
  margin-top: 0;
  padding: 21px 52px 21px 52px;
}

.num {
  margin-bottom: 18px;
}
.num1 {
  float: left;
  margin-right: 100px;
}
.num2 {
  float: left;
  margin-right: 32%;
}

// 状态小圆点
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}
.status-dot-green {
  width: 6px;
  height: 6px;
  background: #1dc779;
  border-radius: 50%;
  content: '';
  display: inline-block;
  margin-right: 6px;
}
.status-dot-red {
  background-color: #e15536;
}
.caozuo {
  text-align: center;
}

.status-dot-green1 {
  width: 4px;
  height: 4px;
  background: #1dc779;
  border-radius: 50%;
  content: '';
  display: inline-block;
  margin-right: 6px;
}

.status-dot-red1 {
  background-color: #e15536;
}
.status-dot[data-v-5c5f3b04] {
  width: 6px;
  height: 6px;
}
.red {
  color: #f56c6c;
}
// ::v-deep .el-button.el-button--warning {
//   width: 70px;
// }
.box7 {
  // 盒子居中
  text-align: center;
  margin-top: 20px;
}
</style>

